<template>
  <el-form
    ref="formRef"
    v-loading="formLoading"
    :model="formData"
    :rules="formRules"
    label-width="200px"
  >
    <el-form-item :label="t('profile.user.nickname')" prop="nickname">
      <el-input
        v-model="formData.nickname"
        :placeholder="t('common.inputText') + t('profile.user.nickname')"
      />
    </el-form-item>
    <el-form-item :label="t('profile.user.mobile')" prop="mobile">
      <el-input
        v-model="formData.mobile"
        :placeholder="t('common.inputText') + t('profile.user.mobile')"
      />
    </el-form-item>
    <el-form-item :label="t('profile.user.email')" prop="email">
      <el-input
        v-model="formData.email"
        :placeholder="t('common.inputText') + t('profile.user.email')"
      />
    </el-form-item>
    <el-form-item :label="t('profile.user.gender')" prop="gender">
      <el-radio-group v-model="formData.gender">
        <el-radio v-for="dict in common_gender" :key="dict.value" :value="dict.value">
          {{ dict.label }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
  <div style="text-align: center">
    <XButton :title="t('common.save')" type="primary" @click="submitForm()" />
    <XButton :title="t('common.reset')" type="danger" @click="resetForm()" />
  </div>
</template>

<script setup lang="ts">
import * as ProfileApi from '@/api/system/profile'
import { useUserStore } from '@/stores/modules/user'
import type { FormRules } from 'element-plus'

defineOptions({ name: 'ProfileBasicInfo' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userStore = useUserStore()
const { common_gender } = useIntDict(DICT_TYPE.common_gender)

const props = defineProps({
  userProfile: {
    type: Object as PropType<ProfileApi.ProfileVO>,
    required: true
  }
})

const formLoading = ref(false) // 表单加载中标记，1. 修改时的数据加载，2. 提交的按钮禁用
const formData = ref({
  nickname: '',
  mobile: '',
  email: '',
  gender: undefined as any
})
const formRules = reactive<FormRules>({
  nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
  email: [
    { required: true, message: t('profile.rules.mail'), trigger: 'blur' },
    {
      type: 'email',
      message: t('profile.rules.truemail'),
      trigger: ['blur', 'change']
    }
  ],
  mobile: [
    { required: true, message: t('profile.rules.phone'), trigger: 'blur' },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: t('profile.rules.truephone'),
      trigger: 'blur'
    }
  ]
})
const formRef = ref() // 表单ref

const emit = defineEmits(['success']) // 定义success事件，用于操作成功后的回调
const submitForm = async () => {
  if (await formValidate(formRef)) return
  formLoading.value = true
  try {
    await ProfileApi.updateUserProfile(formData.value)
    message.success(t('common.updateSuccess'))
    userStore.setUserNickname(formData.value.nickname)
    emit('success')
  } finally {
    formLoading.value = false
  }
}

const resetForm = async () => {
  setFormData(props.userProfile)
  formRef.value?.clearValidate()
}

const setFormData = (profile: ProfileApi.ProfileVO) => {
  formData.value = {
    nickname: profile.nickname,
    mobile: profile.mobile,
    email: profile.email,
    gender: profile.gender
  }
}

watch(
  // 如果是浅层监听，则无法感知到userProfile对象中属性的变更，只能监听到userProfile自身引用的变更，需要深层监听才能感知其属性的变更
  () => props.userProfile,
  (profile) => {
    setFormData(profile)
  },
  { immediate: true, deep: true }
)
</script>

<style scoped lang="scss"></style>
